<template>

    <div class="list">


        <div :style="{ background: 'var(--color-fill-2)', padding: '10px' }" class="list">
            <a-page-header
                    :style="{ background: 'var(--color-bg-2)' }"
                    title="详情"
                    @back="back"
            >

                <a-comment
                        :author="`${dataSource.value?.createUser?.username}`
                         +' &nbsp;&nbsp;&nbsp;&nbsp;   遗失地点'+'  ：  '+ `    ${dataSource?.value?.address}`"
                        :avatar="dataSource?.value?.createUser?.avatarUrl"
                        :content="dataSource?.value?.createTime"
                >

                </a-comment>


                <a-list
                        class="list-demo"
                        :bordered="false"
                        :data="infoArr"
                        :pagination-props="paginationProps"
                >

                    <template #item="{ item }">
                        <a-list-item class="list-demo-item" action-layout="vertical">

                            <!--<template #actions>

                                <span><icon-eye/>  {{83}}</span>
                                <span><icon-message/>&nbsp;{{83}}</span>


                            </template>-->

                            <template #extra>
                                <div className="image-area">
                                    <img alt="图片描述" :src="item.imageUrl"
                                         style="width: 300px;height: 150px;margin-left: 100px"/>
                                </div>
                            </template>
                            <a-list-item-meta

                                    :description="item.description"
                            >


                            </a-list-item-meta>
                        </a-list-item>
                    </template>


                </a-list>

                <a-divider orientation="left">评论区</a-divider>


                <div v-for="i in commentList">
                    <a-comment
                            class="list-comment"
                            :author="i.userVO.username"
                            :content="i.content"
                            :avatar="i.userVO.avatarUrl"
                            :datetime="i.createTime"

                    >
                        <template #actions>
                            <span class="action"
                                  @click="handleClick(showUser?.id,i.userVO.username,i.id)"> <IconMessage/> Reply </span>
                        </template>
                        <div v-for="child in i.children">
                            <a-comment
                                    :author="`${child.userVO.username}  回复@ ${child.target}`"
                                    :avatar="child.userVO.avatarUrl"
                                    :content="child.content"
                                    :datetime="child.createTime"
                            >
                                <template #actions>
                                    <span class="action"
                                          @click="handleClick(showUser?.id,child.userVO.username,i.id)"> <IconMessage/> Reply </span>
                                </template>
                            </a-comment>
                        </div>

                    </a-comment>
                </div>
                <!--底部评论框-->
                <a-comment
                        style="margin-top: 50px"
                        align="right"
                        :avatar="showUser?.avatarUrl"
                >
                    <template #actions>
                        <a-button type="primary" @click="bottomReply(showUser?.id)" :disabled="disabled"> 评论</a-button>
                    </template>
                    <template #content>
                        <a-textarea placeholder="在这里输入你想说的话,不能超过500个字"
                                    :max-length="500"
                                    allow-clear
                                    show-word-limit
                                    v-model="bottomContext"
                                    :auto-size="{ minRows:5, maxRows:6}"
                        />
                    </template>

                </a-comment>


            </a-page-header>


        </div>


    </div>

    <!--弹窗评论-->
    <div>
        <a-drawer
                :width="340" :height="270" :visible="visible" :placement="position"
                @ok="handleOk"
                @cancel="handleCancel"
                cancel-text="取消"
                ok-text="评论"
                unmountOnClose
        >
            <template #title>
                评论
            </template>
            <a-comment

                    align="right"
                    :avatar="showUser?.avatarUrl"
            >

                <template #content>
                    <a-textarea placeholder="在这里输入你想说的话,不能超过500个字"
                                :max-length="500"
                                allow-clear
                                show-word-limit
                                :auto-size="{ minRows:5, maxRows:6}"
                                v-model="context"

                    />
                </template>
            </a-comment>
        </a-drawer>

    </div>


</template>

<script setup>
    import {ref, computed} from "@vue/reactivity";
    import myAxios from "../plugins/myAxios";
    import {useRoute} from "vue-router";
    import {useRouter} from "vue-router";
    import {reactive} from 'vue';
    import message from "@arco-design/web-vue/es/message";
    import {onBeforeMount, onMounted} from "@vue/runtime-core";
    import {routes} from "@/router/routes";
    import {watch, nextTick} from 'vue'

    const router = useRouter();
    const dataSource = reactive({})
    const showUser = ref({})
    const commentList = ref([])

    onMounted(async () => {

        const res = await myAxios.get("/post/get", {
            params: {
                id: route.query.id,
            },
        })

        if (res?.code === 0) {
            dataSource.value = res.data;
        } else {

        }
        const res1 = await myAxios.get('/user/current');
        //后端返回的code是0,则获取到了用户的信息，然后返回
        if (res.code == 0) {
            showUser.value = res1.data
        } else {

        }
        //获取帖子对应的评论区内容
        const res2 = await myAxios.get("/comment/get", {
            params: {
                postId: route.query.id,
            },
        })

        if (res2.code == 0) {
            commentList.value = res2.data;
        }


    })

    const bottomContext = ref('')
    const bottomReply = async (userId) => {

        const res = await myAxios.post('/comment/reply', {
                user_id: userId,
                content: bottomContext.value,
                postId: route.query.id,

            });

        console.log(bottomContext)

        if (res.code==0){
            message.success('评论成功');
            location. reload();
        }else {
            message.error(res.description?`${res.description}`:'评论失败！')
        }

    }


    const route = useRoute();
    const infoArr = ref([])
    watch(() => dataSource, (newValue, oldValue) => {
            if (newValue?.value) {

                dataSource.value = newValue.value
                infoArr.value = [dataSource.value]

            }
        }, {immediate: true, deep: true}
    )

    watch(() => showUser, (newValue, oldValue) => {
            if (newValue?.value) {
                showUser.value = newValue.value
            }
        }, {immediate: true, deep: true}
    )
    // bottomContext是空的或者只包含空格，就禁用评论按钮
    const context = ref('');
    const disabled = ref(true)
    watch(() => bottomContext, (newValue, oldValue) => {
            if (newValue.value.trim().length !== 0) {
                disabled.value=false;
            }
        }, {immediate: true, deep: true}
    )


    //隐藏的评论窗
    const visible = ref(false);
    const position = ref('bottom');

    //点击回复
    const commentParam=ref({
        id: '',
        target: '',
        parentId: '',

    })

    const handleClick = (user_id,target,parentId) => {
        commentParam.id=user_id,
        commentParam.target=target,
        commentParam.parentId=parentId

        visible.value = true;
        context.value = ''

    };

    const handleOk =async () => {

        visible.value = false;
        const res = await myAxios.post('/comment/reply', {
            user_id:  commentParam.id,
            content: context.value,
            postId: route.query.id,
            target: commentParam.target,
            parentID: commentParam.parentId
        });

        if (res.code==0){
            message.success('评论成功');
            location. reload();
        }else {
            message.error(res.description?`${res.description}`:'评论失败！')
        }
        context.value = ''

    };
    const handleCancel = () => {
        visible.value = false;
    }

    //返回按钮
    const back = () => {
        router.back()
    }




</script>

<style scoped>
    /*.bg{
        width: 40%;
        height: 200px;
        border: 1px solid #000000;
        position: relative;
    }*/

    .list {

        width: 80%;;
        top: 0px;
        left: 0;
        right: 0;
        bottom: 0px;
        margin: auto;
    }

    .list-comment {
        /*height: calc(100vh - 60vh); !* 设置评论区域的高度 *!*/
        overflow: auto; /* 设置评论区域可以滚动 */
    }


</style>